<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Video.js Sublime Skin</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <!-- 
  <link rel='stylesheet' href='../../css/video-js.min.css'> -->
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
   <!--    <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
      <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script> -->

 
<style>

    body {
        width: 100%;
        
        background: #fff;
        text-align: center; 
        color: #aaa;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       /* background: radial-gradient(#333, hsl(200,30%,6%) );*/
        margin: 0;
        padding: 0;
      }

      
      /*顶部导航样式*/

    /*修改标题栏颜色*/
    .bar.bar-nav {
      width:100%;
      height:2.5rem;
      line-height:2.5rem;
      background-color: #1FCA23; 
      
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
      padding-left:12px;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 80%;
      height: 2.5rem;
      line-height: 2.5rem;
      float: left;
      text-align: center;
      color: #fff;
      font-size: 16px;
    }
    /*内容样式*/
   .card-content{
      width: 94%;
      height: 3.5rem;
      border-bottom: 1px solid #ededee;
      position: absolute;
      top:16.0rem;
      left: 3%;
      text-align: left;
    }
    .card-content h4{
      font-size: 16px;
      color: black;
      margin: 0.8rem 0.8rem 0.4rem;

    }
    #titleprice{
       color:#f00b0d;
       font-size: 14px;
       font-weight:bolder;
       margin-left:0.8rem;
    }
    #paddcon{
      width: 94%;
      height:auto;
      padding-bottom:1.2rem;
      position: absolute;
      top:21rem;
      left: 3%;
      text-align: left;
    }
    #paddcon h4{
      font-size: 16px;
      color: black;
      margin: 0.5rem 0.8rem 0.6rem;
    }
    #paddcon #desc{
      font-size: 16px;
      color: black;
      margin-left: 0.8rem;
    }
    #desc p{
      margin: 0;
    }

    #instructions{
      width:100%;  
      z-index: 100;
      float: left;
      object-fit: cover;
      background-color: black;
    }
    #my-video{
      width: 100%;
      float: left;
      object-fit: cover;
      
    }
    /* #my-video1{
  
    }*/
           
 
</style>

    

</head>

<body>
      <!-- 标题栏 -->
      <header class="bar bar-nav">
         <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
         <span id="pull-title">视频播放</span>
      </header>
       	
      
          <div id="instructions">
  <!--          <video id="my_video_1" class="video-js vjs-sublime-skin" controls poster="http://vjs.zencdn.net/v/oceans.png" width="375" height="200" controls preload="none"
           data-setup='{ "html5" : { "nativeTextTracks" : false } }'><source  src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /><source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' /></video> --> 

         <!--         <video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
                poster="m.jpg" data-setup="{}">
                   <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                   <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
                 </video> -->



            </div>
       <div class="card-content" style="margin-top:20px">
          <h4></h4>
          <div id="titleprice"></div>
       </div>
       <!-- 内容介绍部分 -->    
       <div id="paddcon">
           <h4>内容简介</h4>
           <div id="desc">
             <p></p>
           </div>
           
       </div>
  

    
  <!-- !- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<!-- <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script> -->
<!-- 这一行代码是为了 避免js冲突 -->
<!-- <script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script> -->


<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!-- <script src='https://vjs.zencdn.net/5-unsafe/video.js'></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> -->
<script  src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/videoplay.js"></script>


<script type="text/javascript">

  // 当前cid值和url值
  var videocid = "-1";
  var videourl = "-1";
  
  // 点击返回
  function backclick(){
   native_goto('local/finish');
  }
  
   // 遍历数据
  function getData(){ 
    var param = {}
    var url = 'api/v1/videos/'+videocid;
    net_request('get',url,param,successCallBack,errorCallBack);
 }

  // 视频接口
  function getVideo(url){
    // var strdatasetup = "data-setup='{ \"html5\" : { \"nativeTextTracks\" : false } }'";
//poster="http://vjs.zencdn.net/v/oceans.png"
    // $("#instructions").html('<video id="my_video_1" class="video-js vjs-sublime-skin" controls preload="none"  width="375" height="200" '+strdatasetup+'><source  src="'+videourl+'" type="video/webm" /></video>');

//<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
// <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
if(isIOS()){
  url = "file://" + url;
}else{
  url = "content://com.packagename.bookreader" + url;
}

// native_showdialog(url);
var swidth = window.screen.width;
  if(isIOS()){

    $("#instructions").html('<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" width="'+swidth+'" height = "200"  poster="m.jpg" data-setup="{}"><source src="'+url+'" type="video/mp4"><source src="'+url+'" type="video/ogg"><source src="'+url+'" type="video/webm"><p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p></video>');
  }else{

    $("#instructions").html('<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" width="'+swidth+'" height = "200"  poster="m.jpg" data-setup="{}"><source src="'+url+'" type="video/mp4"><source src="'+url+'" type="video/ogg"><source src="'+url+'" type="video/webm"><p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p></video>');
  }
    



   
  }

  // 成功函数回调  页面
 function successCallBack(data){
   // console.log(JSON.stringify(data));

   if (isNotNull(data)) {
     var item = data.data.book;

     var html = '';
     var content = '';
     // 遍历数据                 
      if (isNotNull(item)) {

                    html = `
                            <h4>${item.name}</h4> 
                           `; 
                    
                    content = `<p style="text-indent:2em;">${item.desc}</p>`;

                    if (!isNotNull(item.desc)) {
                         content = "无";
                     }

                 }

      
                $('.card-content').html(html);
                $('#desc').html(content);       
     
   }
 }

 // 失败函数回调
 function errorCallBack(data){
   console.log(JSON.stringify(data));
 }

  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
   var jodata = urlParamParseJson(data);
     if(isNotNull(jodata)){//

      videocid = jodata.cid;
      videourl = jodata.url;
        
        getVideo(jodata.url);
         getData();
     }

  }


// getParams("xxx?cid=9&url="+'../../book8/111.mp4');



//设置中文
      videojs.addLanguage('zh-CN', {
        "Play": "播放",
        "Pause": "暂停",
        "Current Time": "当前时间",
        "Duration": "时长",
        "Remaining Time": "剩余时间",
        "Stream Type": "媒体流类型",
        "LIVE": "直播",
        "Loaded": "加载完毕",
        "Progress": "进度",
        "Fullscreen": "全屏",
        "Non-Fullscreen": "退出全屏",
        "Mute": "静音",
        "Unmute": "取消静音",
        "Playback Rate": "播放速度",
        "Subtitles": "字幕",
        "subtitles off": "关闭字幕",
        "Captions": "内嵌字幕",
        "captions off": "关闭内嵌字幕",
        "Chapters": "节目段落",
        "Close Modal Dialog": "关闭弹窗",
        "Descriptions": "描述",
        "descriptions off": "关闭描述",
        "Audio Track": "音轨",
        "You aborted the media playback": "视频播放被终止",
        "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
        "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
        "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
        "No compatible source was found for this media.": "无法找到此视频兼容的源。",
        "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
        "Play Video": "播放视频",
        "Close": "关闭",
        "Modal Window": "弹窗",
        "This is a modal window": "这是一个弹窗",
        "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
        ", opens captions settings dialog": ", 开启标题设置弹窗",
        ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
        ", opens descriptions settings dialog": ", 开启描述设置弹窗",
        ", selected": ", 选择",
        "captions settings": "字幕设定",
        "Audio Player": "音频播放器",
        "Video Player": "视频播放器",
        "Replay": "重播",
        "Progress Bar": "进度小节",
        "Volume Level": "音量",
        "subtitles settings": "字幕设定",
        "descriptions settings": "描述设定",
        "Text": "文字",
        "White": "白",
        "Black": "黑",
        "Red": "红",
        "Green": "绿",
        "Blue": "蓝",
        "Yellow": "黄",
        "Magenta": "紫红",
        "Cyan": "青",
        "Background": "背景",
        "Window": "视窗",
        "Transparent": "透明",
        "Semi-Transparent": "半透明",
        "Opaque": "不透明",
        "Font Size": "字体尺寸",
        "Text Edge Style": "字体边缘样式",
        "None": "无",
        "Raised": "浮雕",
        "Depressed": "压低",
        "Uniform": "均匀",
        "Dropshadow": "下阴影",
        "Font Family": "字体库",
        "Proportional Sans-Serif": "比例无细体",
        "Monospace Sans-Serif": "单间隔无细体",
        "Proportional Serif": "比例细体",
        "Monospace Serif": "单间隔细体",
        "Casual": "舒适",
        "Script": "手写体",
        "Small Caps": "小型大写字体",
        "Reset": "重启",
        "restore all settings to the default values": "恢复全部设定至预设值",
        "Done": "完成",
        "Caption Settings Dialog": "字幕设定视窗",
        "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
        "End of dialog window.": "结束对话视窗"
      });
      
      

      function pauseVideo(){
        // $.alert("暂停");
        // var myPlayer = videojs('my-video');
         // myPlayer.stop();
         // var myVideo = document.getElementById("my-video");
         // myVideo[0].stop();
         $('video').trigger('pause');

      }
    
      
    
      
      // var myPlayer = videojs('my-video');
      // videojs("my-video").ready(function(){
      //   var myPlayer = this;
      //   myPlayer.play();
      // });



</script>



</body>
</html>